<template>
  <!-- 房管员详情-查看历史 -->
  <base-paenl v-if="isShowList" class="grid-information-dialog" id="gridDialog">
    <div
      slot="header"
      class="header-title"
      @mousedown="mouseDownLeft($event, 'gridDialog', 100, 600)"
    >
      历史轨迹
    </div>
    <div slot="main" class="slot-main">
      <div class="area-select">
        <div class="search-name">搜索</div>
        <el-select
          v-model="lxValue"
          placeholder="按业务"
          size="mini"
          popper-class="area-popper"
          style="width: 110px"
        >
          <el-option
            v-for="item in ywlxOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-model="keyValue"
          placeholder="请输入关键字搜索"
          size="mini"
          style="width: 145px"
        ></el-input>
        <div class="grid-info-operate-div" @click="search">查询</div>
        <div class="grid-info-operate-div" @click="reset">重置</div>
      </div>

      <el-scrollbar style="height: 240px; margin-top: 10px">
        <div class="grid-range-header">
          <div class="row-index"></div>
          <div class="col col1">业务类型</div>
          <div class="col col2">巡查起止时间</div>
          <div class="col col3">地址</div>
        </div>
        <div
          v-for="(item, index) in tableList"
          :key="index"
          class="grid-range-row"
          @click="goDetail(item)"
        >
          <div class="row-index">{{ index + 1 }}</div>
          <div class="col col1">{{ item.ywlx }}</div>
          <div class="col col2">{{ item.hcsj }}</div>
          <div class="col col3">{{ item.dz }}</div>
        </div>
      </el-scrollbar>
    </div>
  </base-paenl>
  <base-paenl v-else class="grid-information-dialog" id="gridDialog">
    <div
      slot="header"
      class="header-title"
      @mousedown="mouseDownLeft($event, 'gridDialog', 100, 600)"
    >
      历史详情
    </div>
    <div slot="main" class="slot-main">
      <div class="area-select">
        <div class="search-name">坐落</div>
        <div class="detail-title">{{ detailTitle }}</div>
        <div class="grid-info-operate-div" @click="isShowList = true">
          返回列表
        </div>
      </div>
      <el-scrollbar style="height: 240px; margin-top: 10px">
        <el-descriptions
          v-for="(item, index) in detailList"
          :key="index"
          :title="item.title"
          :column="item.column"
        >
          <el-descriptions-item
            v-for="(list, i) in item.lists"
            :key="i"
            :label="list.label"
            >{{ list.value }}</el-descriptions-item
          >
        </el-descriptions>
      </el-scrollbar>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { mouseDownLeft } from "@/assets/modules/utils";
import BasePaenl from "./CBase.vue";

import { getWgyCkls, getWgyCklsXq } from "@/assets/modules/service";

@Component({
  name: "CHistory",
  components: {
    BasePaenl
  }
})
export default class extends Vue {
  tableList: any = [];
  lxValue: string = "";
  keyValue: string = "";

  ywlxOptions: Object[] = [
    {
      value: "lx",
      label: "按业务"
    },
    {
      value: "sj",
      label: "按时间"
    },
    {
      value: "dz",
      label: "按坐落"
    }
  ];
  detailTitle: string = "";
  detailList: Object[] = [
    {
      title: "签到情况",
      column: 2,
      lists: [
        {
          key: "createUserName",
          label: "签到人",
          value: ""
        },
        {
          key: "createTime",
          label: "签到时间",
          value: ""
        },
        {
          label: "填写人",
          value: ""
        },
        {
          label: "联系方式",
          value: ""
        },
        {
          label: "巡查距离",
          value: ""
        },
        {
          label: "异常原因",
          value: ""
        }
      ]
    },
    {
      title: "核查情况",
      column: 2,
      lists: [
        {
          key: "hcry",
          label: "核查人",
          value: ""
        },
        {
          key: "hcsj",
          label: "核查时间",
          value: ""
        },
        {
          label: "核查结论",
          value: ""
        },
        {
          label: "核查详情",
          value: ""
        },
        {
          label: "巡查距离",
          value: ""
        },
        {
          label: "异常原因",
          value: ""
        }
      ]
    },
    {
      title: "",
      column: 1,
      lists: [
        {
          label: "地址是否有误",
          value: ""
        },
        {
          label: "是否设有警示标识",
          value: ""
        },
        {
          label: "结构形式和初步判断是否一致",
          value: ""
        },
        {
          label: "层数是否正确",
          value: ""
        },
        {
          label: "户主姓名是否有误",
          value: ""
        },
        {
          label: "户主联系方式是否有误",
          value: ""
        }
      ]
    }
  ];
  isShowList: boolean = true;
  created() {
    this.getWgyCkls();
  }
  mounted() {}
  mouseDownLeft(event: any, id: string, sTop: number, sRight: number) {
    mouseDownLeft(event, id, sTop, sRight);
  }
  search() {
    this.getWgyCkls(this.lxValue, this.keyValue);
  }
  reset() {
    this.lxValue = ''
    this.keyValue = ''
  }
  goDetail(val: any) {
    this.detailTitle = val.dz || "暂无地址";
    getWgyCklsXq(val.sfid).then((res: any) => {
      this.detailList.forEach((i: any) => {
        i.lists.forEach((j: any) => {
          j.value = res.data[j.key] || "无信息";
        });
      });
      this.isShowList = false;
    });
  }
  getWgyCkls(lx?: string, key?: string) {
    // 获取房管员历史列表
    const data = {
      hcr: "987654321",
      lx: lx, //类型
      ywlx: key, //业务类型
      jssj: key, //开始时间
      dz: key, //地址
      current: 1,
      size: 10
    };
    getWgyCkls(data).then((res: any) => {
      this.tableList = res?.data.records;
    });
  }
}
</script>

<style lang="scss" scoped>
.grid-information-dialog {
  width: 505px;
  height: 362px;
  background-image: url(../../assets/images/dialogs/tanchuangbeijingkuang-1.png);
  background-size: 100% 100%;
}
.search-name {
  font-family: AlibabaPuHuiTi_2_85_Bold;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  color: #24e9ea;
}
.detail-title {
  color: #fff;
}
.grid-info-operate-div {
  width: 80px;
  height: 28px;
  background: url("../../assets/images/panels/guijihuifanganniubeijingqian.png");
  background-size: 100% 100%;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
.grid-range-row {
  width: 470px;
  height: 32px;
}
.col1 {
  width: 60px;
  text-align: center;
}
.col2 {
  width: 120px;
  text-align: center;
}
.col3 {
  width: 220px;
  text-align: center;
}
.col4 {
  width: 60px;
  text-align: center;
}
</style>
<style lang="scss">
.grid-information-dialog {
  position: fixed;
  left: 600px;
  top: 100px;
  z-index: 100;
}
.dialog-content-second {
  display: flex;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-size: 16px;
  line-height: 44px;
  // color: #ffffff;
}
.grid-range-row {
  // background-color: rgba(5, 61, 122, 0.25);
  display: flex;
  align-items: center;
  margin: 2px 0;
  color: #fff;
  .row-index {
    width: 26px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #0a559f;
    border-radius: 3px;
  }
  .col {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    line-height: 44px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
<style lang="scss" scoped>
.slot-main {
  ::v-deep .el-descriptions__title {
    color: #3998ff;
  }
  ::v-deep .el-descriptions__body {
    background-color: initial;
    color: #fff;
  }
}
.grid-range-header {
  width: 470px;
  height: 32px;
  background-image: url(../../assets/images/dialogs/tuanchuangbiaotoudikuan.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  .row-index {
    width: 26px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 3px;
  }
  .col {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    font-size: 14px;
    line-height: 44px;
    color: #ffffff;
  }
}
.area-select {
  display: flex;
  justify-content: space-between;
  .el-input__inner {
    background-color: #001022;
    border-radius: 4px;
    border: solid 1px #1658a0;
    font-family: AlibabaPuHuiTi_2_45_Light;
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
  }
  .el-select .el-input .el-select__caret {
    color: #ffffff;
    font-size: 16px;
  }
  .el-select .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-select .el-input__inner:focus {
    border-color: #1658a0;
  }
  .el-select:hover .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader .el-input .el-input__inner:focus,
  .el-cascader .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader:not(.is-disabled):hover .el-input__inner {
    border-color: #1658a0;
  }

  .el-cascader .el-input .el-icon-arrow-down {
    transition: transform 0.3s;
    font-size: 14px;
  }
  .el-input--mini .el-input__icon {
    line-height: 28px;
  }
  .el-input__prefix,
  .el-input__suffix {
    color: #ffffff;
  }
}
.area-popper {
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_45_Light;
  border: none;
  background-color: rgba(11, 51, 93, 0.95);
  box-shadow: 0px 0px 8px 0px rgba(0, 19, 41, 0.8);
  border-radius: 4px;
  color: #fff;
  .popper__arrow {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .popper__arrow::after {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .el-cascader-menu {
    color: #fff;
    border-right: none;
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #3998ff;
  }
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxuanzhongshibeijing.png);
  }
  .el-icon-check:before {
    content: "";
  }
  .el-select-dropdown__item {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
  .el-select-dropdown__item.selected {
    color: #3998ff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxiaoxuanzhongtiao.png);
  }
  .el-scrollbar {
    padding-bottom: 17px !important;
  }
  .el-scrollbar .el-scrollbar__wrap {
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
  }
  .el-scrollbar__view {
    height: calc(100% - 20px);
  }
  .el-scrollbar__thumb {
    background-color: transparent;
  }
  .el-cascader-panel {
    .el-radio {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .el-radio__input {
      visibility: hidden;
    }
    .el-cascader-node__postfix {
      top: 10px;
    }
  }
  .el-popover__title {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
}
</style>
